/*
 * 编辑规格
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27 
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-01 14:44:53
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>



</style>
<template>
<div class="v-admin-product-specification-edit">
    <Form ref="formValidate" :model="formValidate" :label-width="80">

        <Form-item label="所属模型" prop="product_mod_id">
            <Select v-if="specificationDetail.product_mod" v-model="formValidate.product_mod_id" clearable filterable transfer>
                <Option v-for="model in productModels" :value="model.id + ''" :key="model.id">{{ model.name }}</Option>
            </Select>
             <Select v-else v-model="formValidate.product_mod_id" clearable filterable transfer>
                <Option value="" disabled selected hidden></Option>
                <Option v-for="model in productModels" :value="model.id + ''" :key="model.id">{{ model.name }}</Option>
            </Select>
        </Form-item>

        <Form-item label="规格名称" prop="name">
            <Input type="text" v-model="formValidate.name" placeholder="请输入规格名称"></Input>
        </Form-item>

        <Form-item v-for="(spec_value,index) in formValidate.spec_values" :key="spec_value.id" :label="'规格值' + (index + 1)">
            <Row>
                <Col span="22">
                    <Input type="text" v-model="spec_value.value" placeholder="请输入规格值"></Input>
                </Col>
                <Col span="1" :offset="1">
                    <Button type="error" size="small" icon="minus" @click="deleteSpec(index)"></Button>
                </Col>
            </Row>
        </Form-item>

        <Form-item label="增删规格值">
            <Button type="success" size="small" icon="plus" @click="addSpec"></Button>
        </Form-item>

        <Form-item>
            <Button type="primary" @click="updateSpecification">更新</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

export default {
    name: 'product-specification-edit',
    props: ['specificationDetail','productModels'],
    data() {	
        return {

            formValidate : {

                name : '',

                product_mod_id : '',

                spec_values : []

            }                  //更新模型时的表单

        }
    },

    watch: {
        'specificationDetail' : function(){

            if( this.specificationDetail ) {

                this.formValidate.name = this.specificationDetail.name;

                this.formValidate.product_mod_id = String(this.specificationDetail.product_mod_id);
                
                this.formValidate.spec_values = this.specificationDetail.spec_values.map((spec_value) => {
                    return {
                        id:spec_value.id,
                        value:spec_value.value
                    }
                });

            }

        },
    },
    methods: {

        /**
         * 增加规格值
         * @return {undefined}
         */
        addSpec(){

            const param = {
                id: 0,
                value : ''
            };

            this.formValidate.spec_values.push(param);

        },

        /**
         * 删除规格值
         * @param  {number} index {需要删除的项目的下标}
         * @return {undefined}
         */
        deleteSpec(index){

            this.formValidate.spec_values.splice(index,1);

        },

        /**
         * 更新产品规格信息
         * @return {undefined}
         */
        updateSpecification(){

            const param = {

                _method : 'PUT',

                name : this.formValidate.name,

                product_mod_id : this.formValidate.product_mod_id,

                spec_values : this.formValidate.spec_values

            }

            this.$emit('update',this.specificationDetail.id,param);

        }
        
    }
}
</script>